<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动抽奖系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: white;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.2); }
            to { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.4); }
        }

        .user-info {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px 25px;
            border-radius: 25px;
            margin-bottom: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            display: inline-block;
        }

        .user-info input {
            padding: 8px 15px;
            border: none;
            border-radius: 20px;
            margin-right: 10px;
            outline: none;
            background: rgba(255, 255, 255, 0.9);
            color: #333;
        }

        .user-info button {
            padding: 8px 15px;
            border: none;
            border-radius: 20px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .user-info button:hover {
            background: #45a049;
            transform: translateY(-2px);
        }

        .lottery-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border-radius: 30px;
            padding: 40px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 800px;
            width: 100%;
        }

        .mode-selector {
            margin-bottom: 30px;
        }

        .mode-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .mode-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .mode-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .mode-btn.active {
            background: rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        /* 转盘抽奖样式 */
        .wheel-container {
            position: relative;
            display: none;
            margin: 20px auto;
        }

        .wheel {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            border: 8px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
            transition: transform 4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .wheel-section {
            position: absolute;
            width: 50%;
            height: 50%;
            transform-origin: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            color: white;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }

        .wheel-pointer {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 30px solid #ff4444;
            z-index: 10;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .wheel-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* 九宫格抽奖样式 */
        .grid-container {
            display: none;
            margin: 20px auto;
        }

        .lottery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            max-width: 400px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 20px;
        }

        .grid-item {
            aspect-ratio: 1;
            background: rgba(255, 255, 255, 0.15);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            color: white;
            text-align: center;
            padding: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .grid-item:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-3px);
        }

        .grid-item.highlight {
            background: rgba(255, 215, 0, 0.8);
            color: #333;
            border-color: #ffd700;
            animation: pulse 0.5s infinite alternate;
            z-index: 5;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
        }

        .grid-item.winner {
            background: rgba(255, 69, 0, 0.9);
            border-color: #ff4500;
            animation: winner 1s ease-in-out;
        }

        @keyframes pulse {
            from { transform: scale(1); }
            to { transform: scale(1.05); }
        }

        @keyframes winner {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .lottery-btn {
            margin: 30px 0;
            padding: 15px 40px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(45deg, #ff6b6b, #ffa500);
            color: white;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .lottery-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .lottery-btn:disabled {
            background: #666;
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .prize-display {
            margin: 20px 0;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
        }

        .winner-announcement {
            background: rgba(255, 215, 0, 0.2);
            border: 2px solid rgba(255, 215, 0, 0.5);
            border-radius: 15px;
            padding: 15px;
            margin: 15px 0;
            animation: celebration 1s ease-in-out;
        }

        @keyframes celebration {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .controls {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .control-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .control-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .history {
            margin-top: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            max-height: 300px;
            overflow-y: auto;
        }

        .history h3 {
            margin-bottom: 15px;
            text-align: center;
        }

        .history-item {
            background: rgba(255, 255, 255, 0.1);
            margin: 8px 0;
            padding: 10px;
            border-radius: 8px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
        }

        .stats {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .stat-item {
            text-align: center;
            margin: 10px;
        }

        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #ffd700;
        }

        .stat-label {
            font-size: 12px;
            opacity: 0.8;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }
            
            .wheel {
                width: 300px;
                height: 300px;
            }
            
            .wheel-container {
                padding: 20px;
            }
            
            .lottery-container {
                padding: 20px;
            }
            
            .mode-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .mode-btn {
                width: 200px;
            }
            
            .stats {
                flex-direction: column;
                align-items: center;
            }
        }

        /* 音效控制 */
        .sound-control {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .sound-control:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🎉 活动抽奖 🎉</h1>
        <div class="user-info">
            <input type="text" id="userName" placeholder="输入您的姓名" maxlength="10">
            <button onclick="setUser()">设置</button>
            <span id="currentUser" style="margin-left: 15px; font-weight: bold;"></span>
        </div>
    </div>

    <div class="lottery-container">
        <div class="stats">
            <div class="stat-item">
                <div class="stat-number" id="totalDraws">0</div>
                <div class="stat-label">总抽奖次数</div>
            </div>
            <div class="stat-item">
                <div class="stat-number" id="winCount">0</div>
                <div class="stat-label">中奖次数</div>
            </div>
            <div class="stat-item">
                <div class="stat-number" id="userWins">0</div>
                <div class="stat-label">您的中奖</div>
            </div>
        </div>

        <div class="mode-selector">
            <h3>选择抽奖模式</h3>
            <div class="mode-buttons">
                <button class="mode-btn active" onclick="switchMode('wheel')">🎰 转盘抽奖</button>
                <button class="mode-btn" onclick="switchMode('grid')">⬜ 九宫格抽奖</button>
            </div>
        </div>

        <!-- 转盘抽奖 -->
        <div class="wheel-container" id="wheelMode">
            <div class="wheel-pointer"></div>
            <div class="wheel" id="wheel">
                <!-- 转盘扇形区域将通过JavaScript生成 -->
            </div>
            <div class="wheel-center">START</div>
        </div>

        <!-- 九宫格抽奖 -->
        <div class="grid-container" id="gridMode">
            <div class="lottery-grid" id="lotteryGrid">
                <!-- 九宫格项目将通过JavaScript生成 -->
            </div>
        </div>

        <div class="prize-display" id="prizeDisplay">
            准备好了吗？点击下方按钮开始抽奖！
        </div>

        <button class="lottery-btn" id="lotteryBtn" onclick="startLottery()">
            🎲 开始抽奖
        </button>

        <div class="controls">
            <button class="control-btn" onclick="resetLottery()">🔄 重置</button>
            <button class="control-btn" onclick="viewHistory()">📋 中奖记录</button>
            <button class="control-btn" onclick="exportResults()">📊 导出结果</button>
        </div>

        <div class="history" id="historySection" style="display: none;">
            <h3>🏆 中奖记录</h3>
            <div id="historyList"></div>
        </div>
    </div>

    <button class="sound-control" id="soundBtn" onclick="toggleSound()" title="切换音效">🔊</button>

    <script>
        // 抽奖系统类
        class LotterySystem {
            constructor() {
                this.prizes = [
                    { name: '一等奖-iPhone 15', probability: 0.01, color: '#FFD700', icon: '📱' },
                    { name: '二等奖-iPad', probability: 0.05, color: '#FF6B6B', icon: '📟' },
                    { name: '三等奖-AirPods', probability: 0.1, color: '#4ECDC4', icon: '🎧' },
                    { name: '四等奖-购物券100元', probability: 0.15, color: '#45B7D1', icon: '🛍️' },
                    { name: '五等奖-购物券50元', probability: 0.2, color: '#96CEB4', icon: '🎫' },
                    { name: '六等奖-购物券20元', probability: 0.25, color: '#FECA57', icon: '🎁' },
                    { name: '谢谢参与', probability: 0.24, color: '#A8EDEA', icon: '😊' }
                ];
                
                this.isDrawing = false;
                this.currentMode = 'wheel'; // 'wheel' 或 'grid'
                this.totalDraws = 0;
                this.winCount = 0;
                this.userWins = 0;
                this.currentUser = localStorage.getItem('currentUser') || '';
                this.lotteryHistory = JSON.parse(localStorage.getItem('lotteryHistory')) || [];
                this.soundEnabled = localStorage.getItem('soundEnabled') !== 'false';
                
                this.initializeSystem();
            }

            initializeSystem() {
                // 设置当前用户
                if (this.currentUser) {
                    document.getElementById('userName').value = this.currentUser;
                    document.getElementById('currentUser').textContent = `当前用户: ${this.currentUser}`;
                }
                
                // 初始化转盘
                this.initWheel();
                
                // 初始化九宫格
                this.initGrid();
                
                // 更新统计
                this.updateStats();
                
                // 初始化音效
                this.initSound();
                
                // 绑定回车键
                document.getElementById('userName').addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') {
                        this.setUser();
                    }
                });
            }

            setUser() {
                const userNameInput = document.getElementById('userName');
                const currentUserSpan = document.getElementById('currentUser');
                
                if (userNameInput.value.trim()) {
                    this.currentUser = userNameInput.value.trim();
                    localStorage.setItem('currentUser', this.currentUser);
                    currentUserSpan.textContent = `当前用户: ${this.currentUser}`;
                    
                    // 显示欢迎消息
                    this.showWinnerAnnouncement(`欢迎 ${this.currentUser} 参与抽奖！祝您好运！`);
                } else {
                    alert('请输入有效的姓名！');
                }
            }

            initWheel() {
                const wheel = document.getElementById('wheel');
                const sectionAngle = 360 / this.prizes.length;
                
                wheel.innerHTML = '';
                
                this.prizes.forEach((prize, index) => {
                    const section = document.createElement('div');
                    section.className = 'wheel-section';
                    section.style.backgroundColor = prize.color;
                    section.style.transform = `rotate(${index * sectionAngle}deg) skewY(${-90 + sectionAngle}deg)`;
                    
                    // 添加文字
                    const text = document.createElement('div');
                    text.style.transform = `skewY(${90 - sectionAngle}deg) rotate(${sectionAngle / 2}deg)`;
                    text.style.marginTop = '60px';
                    text.style.fontSize = '12px';
                    text.innerHTML = `<div style="font-size: 16px; margin-bottom: 5px;">${prize.icon}</div><div>${prize.name}</div>`;
                    text.style.textAlign = 'center';
                    
                    section.appendChild(text);
                    wheel.appendChild(section);
                });
            }

            initGrid() {
                const grid = document.getElementById('lotteryGrid');
                const prizeNames = this.prizes.map(p => p.name);
                
                grid.innerHTML = '';
                
                // 创建9个格子，最后一个格子为"谢谢参与"
                for (let i = 0; i < 9; i++) {
                    const gridItem = document.createElement('div');
                    gridItem.className = 'grid-item';
                    gridItem.innerHTML = `
                        <div style="font-size: 20px; margin-bottom: 5px;">${i < 8 ? this.prizes[i].icon : '😊'}</div>
                        <div>${i < 8 ? prizeNames[i] : this.prizes[6].name}</div>
                    `;
                    grid.appendChild(gridItem);
                }
            }

            switchMode(mode) {
                if (this.isDrawing) return;
                
                this.currentMode = mode;
                
                // 更新按钮状态
                document.querySelectorAll('.mode-btn').forEach(btn => {
                    btn.classList.remove('active');
                });
                event.target.classList.add('active');
                
                // 显示对应模式
                if (mode === 'wheel') {
                    document.getElementById('wheelMode').style.display = 'block';
                    document.getElementById('gridMode').style.display = 'none';
                } else {
                    document.getElementById('wheelMode').style.display = 'none';
                    document.getElementById('gridMode').style.display = 'block';
                }
                
                this.resetLottery();
            }

            startLottery() {
                if (this.isDrawing) return;
                
                if (!this.currentUser) {
                    alert('请先设置您的姓名！');
                    return;
                }
                
                this.isDrawing = true;
                const lotteryBtn = document.getElementById('lotteryBtn');
                lotteryBtn.disabled = true;
                lotteryBtn.textContent = '抽奖中...';
                
                if (this.currentMode === 'wheel') {
                    this.spinWheel();
                } else {
                    this.startGridLottery();
                }
            }

            spinWheel() {
                const wheel = document.getElementById('wheel');
                const prizeCount = this.prizes.length;
                const sectionAngle = 360 / prizeCount;
                
                // 根据概率选择奖品
                const selectedPrizeIndex = this.selectPrizeByProbability();
                const targetAngle = 360 - (selectedPrizeIndex * sectionAngle + sectionAngle / 2);
                const spins = 5 + Math.random() * 5; // 5-10圈
                const finalAngle = spins * 360 + targetAngle;
                
                // 开始旋转
                wheel.style.transform = `rotate(${finalAngle}deg)`;
                
                // 播放音效
                this.playSound('spin');
                
                setTimeout(() => {
                    this.showResult(selectedPrizeIndex);
                }, 4000);
            }

            startGridLottery() {
                const gridItems = document.querySelectorAll('.grid-item');
                let currentIndex = 0;
                let speed = 100; // 初始速度(ms)
                let rounds = 0;
                const maxRounds = 3; // 最大转圈数
                const totalItems = gridItems.length;
                
                // 清除之前的高亮
                gridItems.forEach(item => item.classList.remove('highlight'));
                
                const highlight = () => {
                    // 清除所有高亮
                    gridItems.forEach(item => item.classList.remove('highlight'));
                    
                    // 高亮当前项
                    gridItems[currentIndex].classList.add('highlight');
                    
                    currentIndex = (currentIndex + 1) % totalItems;
                    rounds++;
                    
                    // 计算下一个速度
                    if (rounds < maxRounds * totalItems) {
                        // 前几圈快速
                        speed = 100;
                    } else if (rounds < (maxRounds + 2) * totalItems) {
                        // 中间减速
                        speed = 200;
                    } else {
                        // 最后慢速
                        speed = 300;
                    }
                    
                    // 根据概率决定是否停止
                    if (rounds < (maxRounds + Math.random() * 3) * totalItems) {
                        setTimeout(highlight, speed);
                    } else {
                        // 停止并选择结果
                        const selectedIndex = this.selectPrizeIndexForGrid();
                        this.showGridResult(selectedIndex);
                    }
                };
                
                setTimeout(highlight, speed);
            }

            selectPrizeIndexForGrid() {
                return this.selectPrizeByProbability();
            }

            selectPrizeByProbability() {
                const random = Math.random();
                let cumulativeProbability = 0;
                
                for (let i = 0; i < this.prizes.length; i++) {
                    cumulativeProbability += this.prizes[i].probability;
                    if (random <= cumulativeProbability) {
                        return i;
                    }
                }
                
                // 默认返回最后一个奖品
                return this.prizes.length - 1;
            }

            showResult(prizeIndex) {
                const prize = this.prizes[prizeIndex];
                const isWinner = prizeIndex < 6; // 前6个为奖品，最后一个是谢谢参与
                
                this.totalDraws++;
                if (isWinner) {
                    this.winCount++;
                    this.userWins++;
                    this.showWinnerAnnouncement(`🎉 恭喜 ${this.currentUser} 获得 ${prize.icon} ${prize.name}！`);
                    this.addToHistory(this.currentUser, prize, true);
                } else {
                    this.showWinnerAnnouncement(`😊 ${this.currentUser}，${prize.name}，再接再厉！`);
                    this.addToHistory(this.currentUser, prize, false);
                }
                
                this.updateStats();
                this.updatePrizeDisplay(prize, isWinner);
                this.saveLotteryResult(this.currentUser, prize, isWinner);
                
                // 播放结果音效
                this.playSound(isWinner ? 'win' : 'lose');
                
                this.resetLotteryState();
            }

            showGridResult(prizeIndex) {
                const prize = this.prizes[prizeIndex];
                const isWinner = prizeIndex < 6; // 前6个为奖品，最后一个是谢谢参与
                
                // 高亮获奖项目
                const gridItems = document.querySelectorAll('.grid-item');
                gridItems[prizeIndex].classList.add('winner');
                setTimeout(() => {
                    gridItems[prizeIndex].classList.remove('winner');
                }, 1000);
                
                this.totalDraws++;
                if (isWinner) {
                    this.winCount++;
                    this.userWins++;
                    this.showWinnerAnnouncement(`🎉 恭喜 ${this.currentUser} 获得 ${prize.icon} ${prize.name}！`);
                    this.addToHistory(this.currentUser, prize, true);
                } else {
                    this.showWinnerAnnouncement(`😊 ${this.currentUser}，${prize.name}，再接再厉！`);
                    this.addToHistory(this.currentUser, prize, false);
                }
                
                this.updateStats();
                this.updatePrizeDisplay(prize, isWinner);
                this.saveLotteryResult(this.currentUser, prize, isWinner);
                
                // 播放结果音效
                this.playSound(isWinner ? 'win' : 'lose');
                
                this.resetLotteryState();
            }

            updatePrizeDisplay(prize, isWinner) {
                const prizeDisplay = document.getElementById('prizeDisplay');
                if (isWinner) {
                    prizeDisplay.innerHTML = `
                        <div class="winner-announcement">
                            🎉 恭喜获得：${prize.icon} ${prize.name} 🎉
                        </div>
                    `;
                } else {
                    prizeDisplay.innerHTML = `
                        <div>
                            ${prize.icon} ${prize.name}，${prize.probability > 0.1 ? '继续努力！' : '感谢参与！'}
                        </div>
                    `;
                }
            }

            showWinnerAnnouncement(message) {
                // 移除之前的公告
                const existingAnnouncement = document.querySelector('.winner-announcement');
                if (existingAnnouncement) {
                    existingAnnouncement.remove();
                }
                
                const prizeDisplay = document.getElementById('prizeDisplay');
                const announcement = document.createElement('div');
                announcement.className = 'winner-announcement';
                announcement.textContent = message;
                prizeDisplay.insertBefore(announcement, prizeDisplay.firstChild);
                
                // 3秒后移除公告
                setTimeout(() => {
                    if (announcement.parentNode) {
                        announcement.remove();
                    }
                }, 5000);
            }

            addToHistory(userName, prize, isWinner) {
                const historyItem = {
                    date: new Date().toLocaleString(),
                    user: userName,
                    prize: prize.name,
                    icon: prize.icon,
                    isWinner: isWinner
                };
                
                this.lotteryHistory.unshift(historyItem);
                
                // 只保留最近100条记录
                if (this.lotteryHistory.length > 100) {
                    this.lotteryHistory = this.lotteryHistory.slice(0, 100);
                }
                
                localStorage.setItem('lotteryHistory', JSON.stringify(this.lotteryHistory));
            }

            saveLotteryResult(userName, prize, isWinner) {
                this.addToHistory(userName, prize, isWinner);
            }

            updateStats() {
                document.getElementById('totalDraws').textContent = this.totalDraws;
                document.getElementById('winCount').textContent = this.winCount;
                document.getElementById('userWins').textContent = this.userWins;
            }

            resetLottery() {
                this.isDrawing = false;
                const lotteryBtn = document.getElementById('lotteryBtn');
                lotteryBtn.disabled = false;
                lotteryBtn.textContent = '🎲 开始抽奖';
                
                // 重置转盘
                if (this.currentMode === 'wheel') {
                    const wheel = document.getElementById('wheel');
                    wheel.style.transform = 'rotate(0deg)';
                }
                
                // 重置九宫格
                if (this.currentMode === 'grid') {
                    const gridItems = document.querySelectorAll('.grid-item');
                    gridItems.forEach(item => {
                        item.classList.remove('highlight', 'winner');
                    });
                }
                
                this.updatePrizeDisplay({ name: '准备好了吗？', icon: '🎯' }, false);
            }

            resetLotteryState() {
                setTimeout(() => {
                    this.resetLottery();
                }, 3000);
            }

            viewHistory() {
                const historySection = document.getElementById('historySection');
                const historyList = document.getElementById('historyList');
                
                if (historySection.style.display === 'none') {
                    historyList.innerHTML = '';
                    
                    if (this.lotteryHistory.length === 0) {
                        historyList.innerHTML = '<div style="text-align: center; opacity: 0.7;">暂无抽奖记录</div>';
                    } else {
                        this.lotteryHistory.forEach(item => {
                            const historyItem = document.createElement('div');
                            historyItem.className = 'history-item';
                            const resultText = item.isWinner ? '🎉 中奖' : '😊 参与';
                            const prizeText = item.prize.length > 15 ? item.prize.substring(0, 15) + '...' : item.prize;
                            
                            historyItem.innerHTML = `
                                <div>
                                    <strong>${item.user}</strong> - ${item.icon} ${prizeText}<br>
                                    <small>${resultText} | ${item.date}</small>
                                </div>
                            `;
                            historyList.appendChild(historyItem);
                        });
                    }
                    
                    historySection.style.display = 'block';
                } else {
                    historySection.style.display = 'none';
                }
            }

            exportResults() {
                if (this.lotteryHistory.length === 0) {
                    alert('暂无抽奖记录可导出！');
                    return;
                }
                
                let csvContent = "日期,用户,奖品,是否中奖\n";
                this.lotteryHistory.forEach(item => {
                    const isWinnerText = item.isWinner ? '是' : '否';
                    csvContent += `${item.date},${item.user},${item.prize},${isWinnerText}\n`;
                });
                
                const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', `抽奖记录_${new Date().toLocaleDateString()}.csv`);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }

            initSound() {
                // 创建音频上下文（这里使用Web Audio API生成简单音效）
                try {
                    this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
                } catch (e) {
                    console.log('Web Audio API not supported');
                }
            }

            playSound(type) {
                if (!this.soundEnabled) return;
                
                // 简单的音效实现 - 在实际项目中可以使用预录制的音频文件
                if (!this.audioContext) return;
                
                const oscillator = this.audioContext.createOscillator();
                const gainNode = this.audioContext.createGain();
                
                oscillator.connect(gainNode);
                gainNode.connect(this.audioContext.destination);
                
                switch (type) {
                    case 'spin':
                        // 旋转音效 - 中等频率持续音
                        oscillator.frequency.setValueAtTime(200, this.audioContext.currentTime);
                        gainNode.gain.setValueAtTime(0.1, this.audioContext.currentTime);
                        gainNode.gain.exponentialRampToValueAtTime(0.01, this.audioContext.currentTime + 0.1);
                        oscillator.start();
                        oscillator.stop(this.audioContext.currentTime + 0.1);
                        break;
                        
                    case 'win':
                        // 中奖音效 - 上升音调
                        oscillator.frequency.setValueAtTime(523, this.audioContext.currentTime); // C5
                        oscillator.frequency.setValueAtTime(659, this.audioContext.currentTime + 0.1); // E5
                        oscillator.frequency.setValueAtTime(784, this.audioContext.currentTime + 0.2); // G